import React, { memo, useState } from "react";
import type { FC, ReactNode } from "react";
import { AccountWrapper } from "./style";
import { formatUrlSize } from "@/utils/format";
import QueryPage from "./c-cpns/queryPage";
import PhonePage from "./c-cpns/phonePage";
import PasswordPage from "./c-cpns/passwordPage";

interface IProps {
  children?: ReactNode;
}

const Account: FC<IProps> = () => {
  // 控制accountTab的索引
  const [currIndex, setCurrIndex] = useState(0)

  const AccountTabs = [{
    text: "二维码登录",
    element: <QueryPage />
  },
  {
    text: "手机号登录",
    element: <PhonePage />
  },
  {
    text: "账号登录",
    element: <PasswordPage />
  }]

  const handleTabLClick = (index: number) => (
    setCurrIndex(index)
  )

  return <AccountWrapper>
    <div className="account-logo">
      <img className="account-img" src={formatUrlSize("https://music.ikarts.cn/img/logos/netease-music.png", 128)} alt="登录logo" />
      <div className="account-title">登录网易云账号</div>
    </div>
    {/* 0是二维码 1是手机号 2是账号密码 */}
    {
      AccountTabs[currIndex].element
    }
    <div className="account-tabs">
      {AccountTabs.map((item, index) => (
        <div className="text" key={item.text} onClick={() => handleTabLClick(index)}>
          {currIndex !== index && <span>{item.text}</span>}
          {currIndex !== index && index < AccountTabs.length - 1 && <div className="line">|</div>}
        </div>
      ))}
    </div>
    <p className="statement">CoderkuMusic 承诺不会保存你的任何账号信息到云端。<br />
      你的密码会在本地进行 MD5 加密后再传输到网易云 API。<br />
      CoderkuMusic 并非网易云官方网站，输入账号信息前请慎重考虑。 你也可以前往 CoderkuMusic 的 GitHub 源代码仓库 自行构建并使用自托管的网易云 API。</p>
  </AccountWrapper>;
};

export default memo(Account);